<template>
  <el-dialog
    :title="title"
    v-model="visible"
    align-center
    width="500"
    @close="handleClose"
    :close-on-click-modal="false"
    :append-to-body="true"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-align="right"
      label-width="110"
      label-position="top"
      require-asterisk-position="right"
    >
      <el-form-item label="供应商名称" required>
        <el-select
          class="w-full"
          v-model="form.supplier_id"
          clearable
          placeholder="请选择"
          @change="changeSupplier"
        >
          <el-option
            v-for="item in supplier"
            :key="item.supplier_id"
            :label="item.supplier_name"
            :value="item.supplier_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产品标识及加工说明" required>
        <el-row>
          <el-col :span="12">
            <el-select
              class="w-full"
              v-model="form.product_identification"
              placeholder="产品标识"
            >
              <el-option
                v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
                  .productIdentificationText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select
              class="w-full"
              v-model="form.processing_method"
              placeholder="加工说明"
            >
              <el-option
                v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
                  .processingMethodText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="12" v-if="form.product_identification == 3">
            <el-select class="w-full" v-model="form.tag_style" placeholder="包装样式选择">
              <el-option
                v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
                  .tagStyleText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model.trim="form.remark"
          :autosize="{ minRows: 4, maxRows: 10 }"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive } from "vue";
const visible = ref(false);
let options = reactive(inject("options"));
const emit = defineEmits(["close", "updateForm"]);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  supplier: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const statusMap = new Map([
  ["add", "新增产品标识及加工说明"],
  ["edit", "编辑产品标识及加工说明"],
]);

const title = ref("");
// 打开弹窗
const open = async (type, row) => {
  title.value = statusMap.get(type);
  initForm();
  visible.value = true;
  if (row) {
    form.value = Object.assign({}, row);
    formOrigin.value = Object.assign({}, row);
  }
};

let form = ref({
  name: "",
  product: "",
  remain: "",
  remark: "",
});

const formOrigin = ref({});

const initForm = () => {
  form.value = getForm();
};
// 初始化
const getForm = () => {
  return {
    name: "",
    product: "",
    remain: "",
    remark: "",
  };
};
// 关闭弹窗
const close = () => {
  visible.value = false;
};

const handleClose = () => {
  initForm();
  emit("close");
};

const changeSupplier = (val) => {
  const item = props.supplier.find((i) => i.supplier_id == val);
  if (item == undefined) return;
  form.value.supplier_name = item?.supplier_name;
};

// 提交
const save = () => {
  const isKeyFieldModified = () => {
    // 假设formOrigin是原始表单数据，确保在编辑开始时保存了一份原始数据
    return (
      form.value.supplier_id !== formOrigin.value.supplier_id ||
      form.value.product_identification !== formOrigin.value.product_identification
    );
  };

  if (!isKeyFieldModified()) {
    // 如果关键字段没有被修改，则直接返回，不进行重复检查
    emit("updateForm", form.value);
    close();
    return;
  }

  if (!form.value.supplier_name) {
    ElMessage.error("请选择供应商名称");
    return;
  }
  if (!form.value.product_identification) {
    ElMessage.error("请选择产品标识");
    return;
  }
  if (!form.value.processing_method) {
    ElMessage.error("请选择加工说明");
    return;
  }
  const flag = props.supplier.every((i) => {
    return (
      i.goods_sku_identification_processing.findIndex(
        (i) =>
          !i.delete &&
          i.supplier_id == form.value.supplier_id &&
          i.product_identification == form.value.product_identification
      ) == -1
    );
  });

  if (flag) {
    emit("updateForm", form.value);
    close();
  } else {
    ElMessage.error("供应商+SKU+产品标识需要唯一");
  }
};

defineExpose({ open });
</script>
